<template>
  <div>
    <el-row class="bread-nav">
    <ul class="bread-nav-title">
      <span>资料变更记录</span>
    </ul>

      <ul class="bread-nav-content-right">
        <a class="back" @click="goBack">返回</a>
      </ul>
    </el-row>

    <div class="elTable">
      <table class="myTable">
        <thead>
          <tr>
            <th>
              ID
            </th>
            <th>
              变更时间
            </th>
            <th>
              变更类别
            </th>
            <th>
              原始值
            </th>
            <th>
              变更值
            </th>
            <th>
              变更人
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in list" :key="index">
            <td>
              {{index}}
            </td>
            <td>
              {{item.created_at}}
            </td>
            <td>
              <ul>
                <li v-for="(subItem,subIndex) in item.oper_name" :key="subIndex">{{subItem}}</li>
              </ul>
            </td>
            <td>
              {{item.old_data}}
            </td>
            <td>
              <ul>
                <li v-for="(subItem,subIndex) in item.change_data" :key="subIndex">{{subItem}}</li>
              </ul>
            </td>
            <td>
              {{item.created_by}}
            </td>
          </tr>
        </tbody>
      </table>

      <div style="margin-top:8px">
        <el-tag type="info" style="width:100%">注意：修改记录最少被保留15天、超过15天部分最多保留最后50笔。</el-tag>
      </div>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'notice',
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    add0(m) {
      return m < 10 ? '0' + m : m
    },
    format(shijianchuo) {
      // shijianchuo是整数，否则要parseInt转换
      const time = new Date(parseInt(shijianchuo))
      const y = time.getFullYear()
      const m = time.getMonth() + 1
      const d = time.getDate()
      const h = time.getHours()
      const mm = time.getMinutes()
      const s = time.getSeconds()
      return y + '-' + this.add0(m) + '-' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(mm) + ':' + this.add0(s)
    },
    checkParams(params) {
      if (params && params.username && params.username !== ':username') {
        this.params.username = params.username
      } else {
        this.params.username = this.info.username
      }
    },
    // 获取数据
    fetchData() {
      this.loading = true
      this.$store
        .dispatch('GetLogs')
        .then(response => {
          this.loading = false
          this.list = response.data
          console.log('登录日志获取数据', response)
          // this.pagination = response.pageinfo
          // this.list = response.data.slice(0, 20)
        })
    },

    // 当前页变化
    handleCurrentChange(value) {
      this.pagination.currentPage = value
      this.fetchData()
    },

    // 每页显示数量变化
    handlePageSizeChange(value) {
      this.params.perpage = value
      this.fetchData()
    },
  },
  computed: { ...mapGetters(['info']) },
  data() {
    return {
      // 查詢參數
      params: {
        username: null,
        perpage: 10, // 每页数量
      },
      // 分页信息
      pagination: {
        currentPage: 1,
        totalCount: 0,
        defaultPageSize: 10,
      },
      list: null,
      loading: true,
    }
  },
  watch: {
    $route(to, from) {
      // 监控路由变化,从新加载数据
      if (to.params !== from.params) {
        this.checkParams(to.params)
        if (this.pagination.currentPage !== 1) {
          this.pagination.currentPage = 1 // 默认查询第一页,当前页变化,会触发数据拉取
        } else {
          this.fetchData()
        }
      }
    },
  },
  created() {
    this.checkParams(this.$route.params)
    // 拉取数据
    this.fetchData()
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.bread-nav{
  height:30px;
  font-size: 13px;
  line-height: 30px;
  background: #ECEFF2;
  border-bottom: 1px solid #d0dff2;
  padding: 0 0 0 10px;
  overflow: hidden;
}
.bread-nav-title{
  color:#386399;
  font-weight: bold;
  float: left;
  background: url("../../../../static/agent/img/tb.png") no-repeat left center;
  padding-left: 20px;
}
.bread-nav-content-right{
  float: right;
}
.bread-nav-content-right .back{
  border:0;
  background:url(/static/agent/img/ico_back.png) no-repeat left 8px;
  color:#386399;
  display: block;
  font-weight: bold;
  margin-right: 10px;
  padding: 0 0 0 20px;
}
.bread-nav-content-right .back:hover{
  text-decoration: underline;
}
.elTable{
  padding: 10px;
}
  .multipleSpan{
    display: flex;
    flex-wrap: wrap;
    flex-direction:column;
  }

  .multipleSpan span {
    display: block;
  }

.myTable{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 2px  0;
  text-align: right;
}
.myTable th{
  background: url(/static/agent/img/table_head.gif) repeat-x;
  height: 25px;
  text-align: center;
  color: #131950;
  font-weight: bold;
  line-height: 25px;
  font-size:14px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid #B9C2CB;
  margin: 0;
}
.myTable td{
  text-align: right;
  color: #131950;
  line-height: 25px;
  font-size:14px;
  padding: 5px;
  border: 1px solid #B9C2CB;
  box-sizing: border-box;
}
</style>
